// 切换图片 
let showEle = document.querySelector(".show");
// 获取遮罩层
let maskEle = document.querySelector(".mask");
// 获取 box元素
let boxEle = document.querySelector(".box");
// 获取放大镜区域元素
let enlargeEle = document.querySelector(".enlarge");
// 获取切换的小图
let smallImgEles = document.querySelectorAll(".list p");
let showImg = showEle.querySelector("img");
// console.log(smallImgEles)
smallImgEles.forEach((img,key)=>{
    img.onclick = function(){
        console.log(key);
        // 改变上面的图；
        showImg.src = `./imgs/${key+1}.jpg`;
        // 改变放大区域的图；
        enlargeEle.style.backgroundImage = `url(./imgs/${key+1}.big.jpg)`;
    }
})
showEle.onmousemove = function (e) {
    // 显示遮罩层 
    maskEle.style.display = "block";
    // console.log(boxEle.offsetLeft);
    // 获取鼠标相对于浏览器的位置；
    var x = e.clientX - boxEle.offsetLeft;
    var y = e.clientY - boxEle.offsetTop;

    // var x = e.offsetX;  // showEle  maskEle 
    // var y = e.offsetY;
    console.log(x, y);

    // 把遮罩层设置到x 和y的位置
    let sx = x - maskEle.offsetWidth/2;
    let sy = y - maskEle.offsetHeight/2;

    // 边界的判断
    // 左边边界
    if(sx<0){
        sx = 0;
    }

    // 上边边界
    if(sy<0){
        sy = 0;
    }

    // 右边边界 
    if(sx>showEle.offsetWidth-maskEle.offsetWidth){
        sx = showEle.offsetWidth-maskEle.offsetWidth;
    }

    // 下边的边界
    if(sy>showEle.offsetHeight-maskEle.offsetHeight){
        sy = showEle.offsetHeight-maskEle.offsetHeight;
    }




    maskEle.style.left = sx  + "px";
    maskEle.style.top = sy + "px";

    // 计算 x = sx  y  = sy  
    var showW = showEle.offsetWidth;
    var showH = showEle.offsetHeight;
    
    let str = getComputedStyle(enlargeEle)['background-size'];
    // console.log(str);
    var arr = str.split(" ");
    // console.log(arr);
    var bw = parseInt(arr[0]);
    var bh = parseInt(arr[1]);

    var xx = (sx/showW)*bw;
    var yy = (sy/showH)*bh;
    enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`;

}

// 移入show区域 放大镜要显示 
showEle.onmouseenter = function(){
    enlargeEle.style.display = "block";
}



showEle.onmouseleave = function () {
    maskEle.style.display = "none";
    enlargeEle.style.display = "none";
}



